<style type="text/css">

/*手机自适应*/
@media screen and (max-width: 767px){
	.F1{
		border:0px solid #000000;
		width:100%;
		background-color: #f8f9fb!important;
		display: table;
		font-family:"黑体";
	}
	
	.img1{
		border:0px solid #000000;
		float:left;
		width:90%;
		text-align: center;
		float: left;
		margin-left: 5%;
	}
	
	.img2{
		border-left: 0px solid #e5e5e5;
		border-right: 0px solid #e5e5e5;
	}
	
	.F1_div{
		margin:0 auto;
		border:0px solid #000000;
		width:82%;
		height:85%;
		margin-top:35px;
	}
}

/*平板自适应*/
@media screen and (max-width: 991px) and (min-width: 768px){
	.F1{
		border:0px solid #000000;
		width:100%;
		float:left;
		background-color: #f8f9fb!important;
		display: table;
		font-family:"黑体";
	}
	
	.img1{
		border:0px solid #000000;
		float:left;
		height:100%;
		width:33.3%;
		text-align: center;
		float: left;
	}
	
	.img2{
		border-left: 1px solid #e5e5e5;
		border-right: 1px solid #e5e5e5;
	}
	
	.F1_div{
		margin:0 auto;
		border:0px solid #000000;
		width:82%;
		height:85%;
		margin-top:35px;
	}

}

/*普通电脑屏幕适应*/
@media screen and (min-width: 992px){
	.F1{
		border:0px solid #000000;
		width:100%;
		height:400px;
		background-color: #f8f9fb!important;
		display: table;
		font-family:"黑体";
	}
	
	.img1{
		float:left;
		height:100%;
		width:33.3%;
		text-align: center;
		float: left;
	}
	
	.img2{
		border-left: 1px solid #e5e5e5;
		border-right: 1px solid #e5e5e5;
	}
	
	.F1_div{
		margin:0 auto;
		border:0px solid #000000;
		width:82%;
		height:85%;
		margin-top:35px;
	}
}


.img1_title{
	font-size: 24px;
}

.img1_subtitle{
	color:#55595c;
	font-size: 14px;
	margin-top:20px;
	padding: 15px;
}

</style>

<div class="F1">
	<div class="F1_div">
		<div class="img1">
			<a href="#" class="F1_img">
				<img src="${ctx}/themes/default/img/home-ill-build.png" width="179px">
			</a>
			<div class="img1_title">在线解答code问题</div>
			<div class="img1_subtitle">
				手头有一些小代码想测试功能但是还要新建文件通过服务器去访问？不用啦~直接来这里试着运行吧！
			</div>
		</div>
		
		<div class="img1 img2">
			<a href="#" class="F1_img">
				<img src="${ctx}/themes/default/img/home-ill-projects.png" width="179px">
			</a>
			<div class="img1_title">共享资源/教程</div>
			<div class="img1_subtitle">
				PSR 是 PHP Standard Recommendations 的简写，由 PHP FIG 组织制定的 PHP 规范，是 PHP 开发的实践标准。
			</div>
		</div>
		
		<div class="img1">
			<a href="#" class="F1_img">
				<img src="${ctx}/themes/default/img/home-ill-platform.png" width="179px">
			</a>
			<div class="img1_title">正在开发更多工具...</div>
			<div class="img1_subtitle">
				PHP 函数速记手册等更多有用的小工具正在开发中！
			</div>
		</div> 
	</div>
</div>